<!--
 * @Author: jlzm
 * @Date: 2020-05-19 15:45:21
 * @LastEditors: jlzm
 * @LastEditTime: 2020-06-22 15:24:18
 * @FilePath: \MPShop\components\uniNavbar\uniNavbar.vue
--> 
<template>
	<view class="navbar bd-t">
		<view
			v-for="(item, index) in navList"
			:key="index"
			class="nav-item"
			:class="{ current: tabCurrentIndex === index }"
			@click="tabClick(index)"
		>
			<view class="nav-item__content">
				<text class="nav-item__content-name">{{ item.text }}</text>
				<text
					:style="{ 'background-color': borderColor }"
					class="bd-b"
				></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		navList: {
			type: Array,
			default() {
				return [];
			}
		},

		borderColor: {
			type: String,
			default: "#000000B3"
		},

		tabCurrentIndex: {
			type: Number,
			default: 0
		}
	},
	methods: {
		tabClick(index) {
			this.$emit("tabClick", index);
		}
	}
};
</script>

<style lang="scss" scoped>
.navbar {
	display: flex;
	height: 86rpx;
	background-color: $theme-panel-bg-color;
	position: relative;
	z-index: 10;
	max-width:750rpx;
	overflow-x:scroll;
	.nav-item {
		flex: 1 0 auto;
		min-width:16.666666%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		position: relative;
		font-size: $theme-size-base;
		color: $theme-color-ghost-base;
		&__content {
			display: inline-block;
			position: relative;
			&-name {
				z-index: 10;
			}
		}
		&.current {
			color: #000000;
			font-weight: 500;
			& .bd-b {
				z-index: -1;
				position: absolute;
				left: 50%;
				bottom: -2rpx;
				transform: translateX(-50%);
				width: 92rpx;
				height: 16rpx;
				border-radius: 8rpx;
				opacity: 0.8;
			}
		}
	}
}
</style>